<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<div th:replace="common/common::html"></div>
<head>
    <meta charset="UTF-8">
    <title th:text="#{role.manager.tital}">Title</title>
    <script th:inline="javascript">

        var _gridWidth = null;
        var _gridHeight = null;
        //页面自适应
        function resizePageSize(){
            _gridWidth = $(window).width()-12;/*  -189 是去掉左侧 菜单的宽度，   -12 是防止浏览器缩小页面 出现滚动条 恢复页面时  折行的问题 */
            _gridHeight = $(window).height()-32-75; /* -32 顶部主菜单高度，   -140 查询条件高度*/
        }


        $(function () {

            window.addEventListener("resize",function () {
                resizePageSize();
                $("#flexgrid-id").flexResize(_gridWidth,_gridHeight)
            })
            resizePageSize();
            var _columnWidth = (_gridWidth - 150)/4;
            $("#flexgrid-id").flexigrid({

                width : _gridWidth,
                height : _gridHeight,
                url : /*[[@{queryRoleListByPage}]]*/"",
                dataType : 'json',
                colModel : [
                    {display : 'roleUuid',name : 'roleUuid',width : 150,sortable : false,align : 'center',hide : 'true'},
                    {display : /*[[#{role.name}]]*/"",name : 'roleName',width : _columnWidth, sortable : true,align : 'center'},
                    {display :  /*[[#{role.remarks}]]*/"",name : 'remarks',width : _columnWidth, sortable : true,align : 'center'},
                    {display :  /*[[#{common.operation}]]*/"",name : 'roleUuid',width : _columnWidth, sortable : true,align : 'center',
                        process: function(v,_trid,_row) {
                            var contents = "";
                            if ([[${#authorization.expression("hasRole('ROLE_cldk_data_role_menu')")}]]) {
                                contents += '<a class="btn title=[[#{role.allow.menu}]] onclick="allowMenuByRole(\'' + v + '\')"> <i class="glyphicon glyphicon-wrench"></i> </a>';
                                //角色删除
                                contents += '<a class="btn" title=[[#{role.delete}]] ' +
                                    'onclick="deleteRole(\'' + v + '\',\'' + _row.roleName + '\')"'
                                    + '> <i class="glyphicon glyphicon-trash"></i> </a>';
                                //角色修改
                                contents += '<a class="btn" title=[[#{role.modify}]] ' +
                                    'onclick="modifyRole(\'' + v + '\',\'' + _row.roleName + '\',\'' + _row.remarks + '\')"'
                                    + '> <i class="glyphicon glyphicon-pencil"></i> </a>';
                                //角色显示
                                contents += '<a class="btn" title=[[#{role.details}]] ' +
                                    'onclick="detailsRole(\'' + v + '\',\'' + _row.roleName + '\',\'' + _row.remarks + '\')"'
                                    + '> <i class="glyphicon glyphicon-comment"></i> </a>';
                            }
                            return contents;
                        }},
                ],
                resizable : false, //resizable table是否可伸缩
                useRp : true,
                usepager : true, //是否分页
                autoload : false, //自动加载，即第一次发起ajax请求
                hideOnSubmit : true, //是否在回调时显示遮盖
                showcheckbox : true, //是否显示多选框
                //rowhandler : rowDbclick, //是否启用行的扩展事情功能,在生成行时绑定事件，如双击，右键等
                rowbinddata : true

            });
            query();

            //初始化查询条件

            $("#nav-tools-article-id").searchTools({
                colModel : [
                    {display : /*[[#{role.name}]]*/"", domId:"search-role-name"}
                ],
                reback:function () {
                    query();
                }
            });

            //查询按钮
            $("#query-btn-id").click(function () {
                query();
            });

            //分配菜单对话框
            $("#allow-menu-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{role.allow.menu.dialog}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            var menuArray = [];
                            var ztreeObj = $.fn.zTree.getZTreeObj("allow-menu-ztree-id");
                            var nodes = ztreeObj.getCheckedNodes(true);
                            $(nodes).each(function (index,item) {
                                menuArray.push(item.id);
                            })
                            // console.info(roleArray)
                            var roleIds = $("#allow-menu-dialog-id").attr("roleIds");
                            $.ajax({
                                type: 'post',
                                async: false,
                                dataType: 'json',
                                url: /*[[@{saveMenuRefRole}]]*/'',
                                data: [
                                    {name: "menuIds", value: menuArray},
                                    {name: "roleIds", value: roleIds}
                                ],
                                success: function (data) {
                                    message(data.msg);
                                    $("#allow-menu-dialog-id").dialog('close');
                                },
                                error: function (msg) {
                                    message(/*[[#{common.error}]]*/'');
                                }
                            });

                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });

            //分配菜单按钮
            $("#allow-menu-btn-id").click(function () {
                //$("#allow-menu-dialog-id").dialog('open');
                allowMenuBatch();
            });

            // //初始化增加角色对话框
            $("#add-role-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{add.role.menu.dialog}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            $("#add-role-form-id").submit();
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });

            $("#add-menu-btn-id").click(function () {
                $("#add-role-dialog-id").dialog('open')
            });

            //初始化增加角色表单
            $("#add-role-form-id").ajaxForm({
                dataType: "json",
                success : function (data) {
                    message(data.msg);
                    query();
                    $("#add-role-dialog-id").dialog('close');
                },
                error : function () {
                    message(/*[[#{common.error}]]*/'');
                },
                complete : function (response,status) {

                }
            });


            //初始化删除对话框
            $("#delete-role-dialog-id").dialog({
                autoOpen : false,
                width : 600,
                modal : true,
                resizable : false,
                title: /*[[#{delete.role.dialog}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            var roleUuid = $("#delete-role-dialog-id").attr("roleUuid");
                            $.ajax({
                                type:'post',
                                async:false,
                                dataType:'json',
                                url: /*[[@{deleteRole}]]*/'',
                                data:[
                                    {name:"roleUuid",value:roleUuid},
                                ],
                                success:function (data) {
                                    message(data.msg);
                                    $("#delete-role-dialog-id").dialog('close')
                                    query();
                                },
                                error: function (msg){
                                    message(/*[[#{common.error}]]*/'');
                                }
                            });
                            $( this ).dialog( "close" );
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });

            //初始化修改用户对话框
            $("#modify-role-dialog-id").dialog({
                autoOpen : false,
                width : 600,
                modal : true,
                resizable : false,
                title: /*[[#{role.modify.dialog}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            var roleUuid = $("#modify-role-dialog-id").attr("roleUuid");
                            var roleName =  $("#modify-role-name-id").val();
                            var remarks =  $("#modify-remarks-id").val();
                            $.ajax({
                                type:'post',
                                async:false,
                                dataType:'json',
                                url: /*[[@{modifyRole}]]*/'',
                                data:[
                                    {name:"roleUuid",value:roleUuid},
                                    {name:"roleName",value:roleName},
                                    {name:"remarks",value:remarks}
                                ],
                                success:function (data) {
                                    message(data.msg);
                                    $("#modify-role-dialog-id").dialog('close')
                                    query();
                                },
                                error: function (msg){
                                    message(/*[[#{common.error}]]*/'');
                                }
                            });
                            $( this ).dialog( "close" );
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });

            //初始化角色详情对话框
            $("#details-role-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{details.role.menu.dialog}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            })

        });//ready

        function query() {
            var roleName =  $("#search-role-name").attr("select-value");
            //条件查询读取属性
            $("#flexgrid-id").flexOptions({
                extParam:[
                    {name:"roleName",value:roleName}
                ]
            }).flexReload();
        }

        var allocateSetting = {
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };
        //批量分配菜单
        function allowMenuBatch() {
            var ids = $("#flexgrid-id").getFlexigridiAttrByIndex(0);
            if(ids.length === 0){
                message(/*[[#{common.select.one}]]*/);
                return;
            }
            $("#allow-menu-dialog-id").attr("roleIds",ids);
            $.ajax({
                type: 'post',
                async: false,
                dataType : 'json',
                url: /*[[@{/role/queryMenuZtreeAll}]]*/'',
                data: [],
                success: function (data) {
                    $.fn.zTree.init($("#allow-menu-ztree-id"), allocateSetting, data);
                    $("#allow-menu-dialog-id").dialog('open');
                },
                error: function(msg){
                    message(/*[[#{common.error}]]*/'');
                }
            });
        }

        //打开删除对话框
        function deleteRole(roleUuid,roleName) {
            $("#delete-role-dialog-id").attr("roleUuid",roleUuid);
            $("#mo-role-name-id").val(roleName);
            $("#delete-role-dialog-id").dialog('open');

        }

        //打开修改对话框
        function modifyRole(roleUuid,roleName,remarks) {
            $("#modify-role-name-id").val(roleName);
            $("#modify-remarks-id").val(remarks);
            $("#modify-role-dialog-id").attr("roleUuid",roleUuid);
            $("#modify-role-dialog-id").dialog('open');
        }

        //打开角色详情对话框
        function detailsRole(roleUuid,roleName,remarks) {
            $("#details-role-name-id").val(roleName);
            $("#details-remarks-id").val(remarks);
            $("#details-role-dialog-id").attr("roleUuid",roleUuid);
            getRoleAuthority()
            $("#details-role-dialog-id").dialog('open');
        }

        //获取角色权限
        function getRoleAuthority() {
            var roleUuid = $("#details-role-dialog-id").attr("roleUuid");
            $.ajax({
                type: 'post',
                async: false,
                dataType: 'json',
                url: /*[[@{getRoleAuthority}]]*/'',
                data: [
                    {name:"roleUuid",value:roleUuid}
                ],
                success: function (data) {
                    message(data.msg);
                },
                error: function (msg) {
                    message(/*[[#{common.error}]]*/'');
                }
            });
        }
        /**
         * 单用户分配菜单
         * @param roleId
         */
        function allowMenuByRole(roleId) {
            $("#allow-menu-dialog-id").attr("roleIds",roleId);
            $.ajax({
                type: 'post',
                async: false,
                dataType : 'json',
                url: /*[[@{/role/queryMenuZtreeByRole}]]*/'',
                data: [
                    {name:"roleId",value:roleId}
                ],
                success: function (data) {
                    $.fn.zTree.init($("#allow-menu-ztree-id"), allocateSetting, data);
                    $("#allow-menu-dialog-id").dialog('open');
                },
                error: function(msg){
                    message(/*[[#{common.error}]]*/'');
                }
            });
        }
    </script>
</head>
<body style="display: flex;flex-direction: column;">
<nav style="flex-basis: 31px;display: flex;flex-direction: row;margin:5px 0">
    <article id="nav-tools-article-id" class="nav-tools-article"></article>
    <nav style="flex-grow: 1">
        <a id="query-btn-id" class="btn" th:title="#{common.query}">
            <i class="glyphicon glyphicon-search"></i>
        </a>

        <a sec:authorize="hasRole('ROLE_cldk_data_role_menu')" id="allow-menu-btn-id" class="btn" th:title="#{role.allow.menu}">
            <i class="glyphicon glyphicon-wrench"></i>
        </a>

        <a id="add-menu-btn-id" class="btn" th:title="#{add.role.menu}">
            <i class="glyphicon glyphicon-plus"></i>
        </a>
    </nav>

</nav>
<table id="flexgrid-id" style="flex-grow: 1"></table>
        <div id="allow-menu-dialog-id" style="display: none">
            <ul id="allow-menu-ztree-id" class="ztree"></ul>
        </div>

<!--增加角色-->
<div id="add-role-dialog-id" style="display: none">
    <form id="add-role-form-id" method="post" th:action="addRole" enctype="multipart/form-data">
        <input id="add-role-id" type="text" name="roleName" th:placeholder="#{role.name}" >
        <input id="add-role-remarks-id" type="text" name="remarks" th:placeholder="#{role.remarks}" >
    </form>
</div>

<!--角色详情-->
<div id="details-role-dialog-id" style="display: none">
    <div class="form-group">
        <span th:text="#{role.name}"></span>
        <input id="details-role-name-id" class="form-control" name="roleName">
    </div>
    <div class="form-group">
        <span th:text="#{role.remarks}"></span>
        <input id="details-remarks-id" class="form-control" name="remarks">
    </div>
    <div class="form-tr form-group">
        <span class="left" th:text="#{file.authority.date}"></span>
        <input id="file-authority-id" type="text" class="form-control left" onchange="getRoleAuthority();">
    </div>
</div>


<!--修改角色-->
<div id="modify-role-dialog-id" style="display: none">
    <div class="form-group">
        <span th:text="#{role.name}"></span>
        <input id="modify-role-name-id" class="form-control" name="roleName">
    </div>
    <div class="form-group">
        <span th:text="#{role.remarks}"></span>
        <input id="modify-remarks-id" class="form-control" name="remarks">
    </div>
</div>

<!--删除角色-->
<div id="delete-role-dialog-id" style="display: none">
    <span th:text="#{role.name}"></span>
    <input id="mo-role-name-id" class="form-control" name="roleName">
</div>

</body>
</html>